<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<base href="<%=basePath%>"  />
<title>Metronic | Data Tables - Advanced Datatables</title>
<jsp:include page="common/common_css.jsp" />

<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-quick-sidebar-over-content ">
<!-- BEGIN HEADER -->
<jsp:include page="common/head.jsp" />
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
	<!-- BEGIN SIDEBAR -->
	<jsp:include page="common/menu.jsp" />
	<!-- END SIDEBAR -->
	
	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<div class="page-content">
			<!-- BEGIN STYLE CUSTOMIZER -->
			<jsp:include page="common/theme.jsp" />
			<!-- BEGIN STYLE CUSTOMIZER -->
			
			<!-- 主体内容 -->
				<!-- <a onclick="requestJson()">_______测试请求JSON________</a>
				<a onclick="reqJson()">_______测试2________</a>
				<a id="demo_5">|_______添加角色________|</a>
				<a href="manage/admin/gotoShow">|_______所有用户________|</a> -->
				
				<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
				后台主页
				<!-- <small>advanced datatables</small> -->
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="index.html">主页</a>
						<i class="fa fa-angle-right"></i>
					</li>
				</ul>
			</div>
			
			<h3>JVM 内存使用情况</h3>

			<%
				double total = (Runtime.getRuntime().totalMemory()) / (1024.0 * 1024);
				double max = (Runtime.getRuntime().maxMemory()) / (1024.0 * 1024);
				double free = (Runtime.getRuntime().freeMemory()) / (1024.0 * 1024);
				out.println("<h4 style='margin-left:10%;margin-top:2%'>当前JVM的最大可用内存:&nbsp;&nbsp;&nbsp;&nbsp;" + max + "MB</h4><br/>");
				out.println("<h4 style='margin-left:10%;'>当前JVM占用的内存总数:&nbsp;&nbsp;&nbsp;&nbsp;" + total + "MB</h4><br/>");
				out.println("<h4 style='margin-left:10%;'>当前JVM空闲内存:&nbsp;&nbsp;&nbsp;&nbsp;" + free + "MB</h4><br/>");
				out.println("<h4 style='margin-left:10%;'>JVM实际可用内存:&nbsp;&nbsp;&nbsp;&nbsp;" + (max - total + free) + "MB</h4><br/>");
			%>
			
			<div id="main" style="height:400px"></div>
			
			<!-- END PAGE HEADER-->
				
			<!-- 主体内容 -->
		</div>
	</div>
	<!-- END CONTENT -->
	
	<!-- BEGIN QUICK SIDEBAR -->
	<jsp:include page="common/sidebar.jsp" />
	<!-- END QUICK SIDEBAR -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<jsp:include page="common/footer.jsp" />
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<jsp:include page="common/common_js.jsp" />
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="resource/echarts/echarts.js"></script>
<script>
jQuery(document).ready(function() {       
	
	Metronic.init(); // init metronic core components
	Layout.init(); // init current layout
	QuickSidebar.init(); // init quick sidebar
	Demo.init(); // init demo features
   	BasePack.menuInit();//初始化菜单
   	
	 // 路径配置
    require.config({
        paths: {
            echarts: 'resource/echarts'
        }
    });
    
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/line'// 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
        	
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main')); 
            
            var option = {
            	    title : {
            	        text: 'JVM内存使用情况'
            	    },
            	    tooltip : {
            	        trigger: 'axis'
            	    },
            	    legend: {
            	        data:['最大可用内存','占用内存','空闲内存','实际可用内存']
            	    },
            	    toolbox: {
            	        show : true,
            	        feature : {
            	            mark : {show: true},
            	            dataView : {show: true, readOnly: false},
            	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            	            restore : {show: true},
            	            saveAsImage : {show: true}
            	        }
            	    },
            	    calculable : true,
            	    xAxis : [
            	        {
            	            type : 'category',
            	            boundaryGap : false,
            	            data : ['周一','周二','周三','周四','周五','周六','周日']
            	        }
            	    ],
            	    yAxis : [
            	        {
            	            type : 'value'
            	        }
            	    ],
            	    series : [
            	        {
            	            name:'最大可用内存',
            	            type:'line',
            	            smooth:true,
            	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            	            data:[10, 12, 21, 54, 260, 830, 710]
            	        },
            	        {
            	            name:'占用内存',
            	            type:'line',
            	            smooth:true,
            	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            	            data:[30, 182, 434, 791, 390, 30, 10]
            	        },
            	        {
            	            name:'空闲内存',
            	            type:'line',
            	            smooth:true,
            	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            	            data:[1320, 1132, 601, 234, 120, 90, 20]
            	        },
            	        {
            	            name:'实际可用内存',
            	            type:'line',
            	            smooth:true,
            	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            	            data:[1320, 1132, 601, 234, 120, 90, 20]
            	        }
            	    ]
            	};
            	                    
            
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
            
            var lastData = 11;
            
         	var axisData;
         	
         	setInterval(function (){
         	    
         		jQuery.ajax({
         			url:'manage/system/ajaxGetMemory',
         			type:'POST',
         			dataType:'json',
         			success:function(data){
         				//alert(JSON.stringify(data));
         				 myChart.addData([
		         	        [
		         	            0,        // 系列索引
		         	           	data.total, // 新增数据
		         	            true,     // 新增数据是否从队列头部插入
		         	            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
		         	        ],
			         	    [
			     	            1,        // 系列索引
			     	            data.max, // 新增数据
			     	            true,     // 新增数据是否从队列头部插入
			     	            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
			     	        ],
				     	    [
			     	            2,        // 系列索引
			     	            data.free, // 新增数据
			     	            true,     // 新增数据是否从队列头部插入
			     	            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
			     	        ],
				     	    [
			     	            3,        // 系列索引
			     	            data.valid, // 新增数据
			     	            true,     // 新增数据是否从队列头部插入
			     	            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
			     	        ]
		         	    ]);
         			},
         			error:function(data){
         			
         			}
         		});
         		
         	}, 15000);
            
        }
    );
    
	
});

function requestJson(){
	jQuery.ajax({
		url:'manage/power/ajaxShow',
		type:'POST',
		dataType:'json',
		success:function(data){
			alert(JSON.stringify(data));
			jQuery.each(data,function(i,item){
				alert(JSON.stringify(item));
			});
		},
		error:function(data){
			alert(data);
		}
	});
}

function requestJsons(){
	jQuery.ajax({
		type:'post',
		url:'admins/requestJson.action',
		contentType:'application/json',
		dataType:'json',
		data:'{"username":"admin","userpwd":"123456"}',
		success:function(data){
			alert(JSON.stringify(data));
		},
		error:function(data){
			alert(JSON.stringify(data));
		}
	});
}

function reqJson(){
	jQuery.ajax({
		type:'post',
		url:'admins/reqJson.action',
		contentType:'application/json',
		dataType:'JSON',
		data:'{"username":"admin","userpwd":"123456"}',
		success:function(data){
			alert(JSON.stringify(data));
		},
		error:function(data){
			alert(JSON.stringify(data));
		}
	});
}

</script>
</body>
<!-- END BODY -->
</html>